<html>
<head>
	<meta charset="utf-8">
	<title>Class 与 Style 绑定</title>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>

<h1>---绑定 HTML Class--------</h1>
<h2>------------APP1-----------</h2>
<div id="app1">
	<div v-bind:class="{ active: isActive }">样式1</div>
	<div class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }">
		样式2
	</div>
</div>
<h2>---------------------APP2-------------</h2>
<div id="app2" v-bind:class="classObject">样式3</div>
<h2>--------APP3----------------------</h2>
<div id="app3"v-bind:class="classObject">App3 样式</div>

<h3>数组语法</h3>
<div v-bind:class="[activeClass, errorClass]">数组样式表1</div>
<div v-bind:class="[isActive ? activeClass : '', errorClass]">数组样式表2</div>
<div v-bind:class="[{ active: isActive }, errorClass]">数组样式表3</div>
<h3>用在组件上</h3>

<h1>----绑定Style内联样式--------</h1>
<h3>对象语法</h3>
<div id='app2-1' v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">
	绑定内联样式-对象语法
</div>

<h3>数组语法</h3>
<div id="app2-2" v-bind:style="[baseStyles, overridingStyles]"> 绑定内联样式-数组语法</div>	

<h3>自动添加前缀</h3>
<h3>多重值</h3>

	<script type="text/javascript">
		// data ,computed,methods 用法
		var app1 = new Vue({
		  el: '#app1',
		  data: {
			  isActive: true,
			  hasError: true
			}
		})


		var app2= new Vue({
			el:'#app2',
			data: {
			  classObject: {
			    active: true,
			    'text-danger': true
			  }
			}
		})
		
		var app3=new Vue({
			el:'#app3',
			data: {
			  isActive: true,
			  error: null
			},
			computed: {
			  classObject: function () {
			    return {
			      active: this.isActive && !this.error,
			      'text-danger': this.error && this.error.type === 'fatal'
			    }
			  }
			}
		})

		var app21=new Vue({
			el:"#app2-1",
			data:{
				activeColor: 'red',
  				fontSize: 30
			}
		})

		var app22=new Vue({
			el:"#app2-2",
			data:{
				baseStyles:"activeColor: 'red'",
				overridingStyles:"fontSize: '30px' "
			}
		})

	</script>

</body>
</html>
<style type="text/css">
	.active{background-color: #ff0000}
</style>